<div ng-controller="CodeEditor.PreferencesController">
  <form class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="theme" title="The default theme to be used by the code editor">Theme</label>

      <div class="controls">
        <select id="theme" ng-model="preferences.theme">
          <option value="default">Default</option>
          <option value="ambiance">Ambiance</option>
          <option value="blackboard">Blackboard</option>
          <option value="cobalt">Cobalt</option>
          <option value="eclipse">Eclipse</option>
          <option value="monokai">Monokai</option>
          <option value="neat">Neat</option>
          <option value="twilight">Twilight</option>
          <option value="vibrant-ink">Vibrant ink</option>
        </select>
      </div>
    </div>
  </form>

  <form name="editorTabForm" class="form-horizontal">
    <div class="control-group">
      <label class="control-label" for="tabSIze">Tab size</label>

      <div class="controls">
        <input type="number" id="tabSize" name="tabSize" ng-model="preferences.tabSize" ng-required="ng-required" min="1" max="10"/>
        <span class="help-block"
            ng-hide="editorTabForm.tabSize.$valid">Please specify correct size (1-10).</span>
      </div>
    </div>
  </form>

  <div compile="codeMirrorEx"></div>

<!-- please do not change the tabs into spaces in the following script! -->
<script type="text/ng-template" id="exampleText">
var foo = "World!";

var myObject = {
	message: "Hello",
		getMessage: function() {
		return message + " ";
 	}
};

window.alert(myObject.getMessage() + foo);
</script>

<script type="text/ng-template" id="codeMirrorExTemplate">
  <div hawtio-editor="exampleText" mode="javascript"></div>
</script>
</div>

</div>
